import React, { Component } from 'react'
import { Layout, Carousel, Tabs } from 'antd';

import './login.less'

import LoginForm from '../../components/loginform/loginform'
import RegisterForm from '../../components/registerform/registerform'
import logo from '../../assets/images/logo.png'
import bg from '../../assets/images/bg.jpg'
import bg1 from '../../assets/images/1.jpg'
import bg2 from '../../assets/images/2.jpg'

const { Header, Content, Footer } = Layout;
const { TabPane } = Tabs;

export default class Login extends Component {
    render() {
        return (
            <Layout>
                <Header className="login-header">
                    <div className="logo">
                        <img src={logo} alt="logo" />
                    </div>
                </Header>
                <Content>
                    <div className="session-box">
                        <Carousel effect="fade" autoplay  dots="false">
                            <img src={bg} alt="bg" />
                            <img src={bg1} alt="bg1" />
                            <img src={bg2} alt="bg2" />
                        </Carousel>
                        <Tabs defaultActiveKey="1" tabBarStyle={{ textAlign: "center", marginBottom: "20px" }} size="large" className="Form-box">
                            <TabPane tab="登录" key="1">
                                <LoginForm />
                            </TabPane>
                            <TabPane tab="注册" key="2">
                                <RegisterForm />
                            </TabPane>
                        </Tabs>
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>©2019-2021 成都菩提网络(www.liil.site) 版权所有.</Footer>
            </Layout>
        )
    }
}